<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>朋友圈静态布局</title>
  <link rel="stylesheet" href="./style.css">
  <link rel="stylesheet" href="//at.alicdn.com/t/font_1211576_pe8qiurfue.css">
</head>
<body>
  <!-- 头部 -->
   <header>
     <div>
      <i class="iconfont icon-arrow1l"></i>   
      发现
    </div>
     <div>朋友圈</div>
     <div>
       <img src="./img/friendcircle-camera.svg" alt="">
     </div>
   </header>

   <!-- section -->
   <section>

    <!-- info -->
     <div class="info">
        <div class="info__bg">
          <img src="./img/friendcircle-banner.png" alt="">
        </div>
        <div class="info__cont">
          <p>张小六</p>
          <div class="info__imgwrap">
            <i class="info__dot"></i>
            <img src="http://temp.im/48x48" alt="">
          </div>
        </div>
     </div>

    <!-- 动态 -->
     <div class="list">
        <div class="list-item">
          <img src="http://temp.im/40x40" alt="">
          <div class="list-item__cont">
            <p class="list-item__name">凌度</p>
            <p class="list-item__text">滴滴出行，出行无忧。</p>
            <div class="list-item__share">
              <img src="http://temp.im/40x40" alt="">
              <p>滴滴出行，从此出行无忧。</p>
            </div>
            <div class="list-item__bar">
              <div>
                <i class="iconfont icon-zan"></i>
                <span>9</span>
              </div>
              <div>
                <i class="iconfont icon-xinxi"></i>
                <span>评论</span>
              </div>
            </div>
            <div class="list-item__time">1小时前</div>
            <div class="list-item__comment">
              <ul>
                <li class="list-item__comment-item">
                  <span class="list-item__comment-name">秋香</span>
                  ：<span class="list-item__comment-text">赞~</span>
                </li>
                <li class="list-item__comment-item">
                  <span class="list-item__comment-name">我爱保时捷</span>
                  ：<span class="list-item__comment-text">滴滴；让出行更美丽！</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="list-item">
          <img src="http://temp.im/40x40" alt="">
          <div class="list-item__cont">
            <p class="list-item__name">凌度</p>
            <p class="list-item__text">滴滴出行，出行无忧。</p>
            <div class="list-item__share">
              <img src="http://temp.im/40x40" alt="">
              <p>滴滴出行，从此出行无忧。</p>
            </div>
            <div class="list-item__bar">
              <div>
                <i class="iconfont icon-zan"></i>
                <span>9</span>
              </div>
              <div>
                <i class="iconfont icon-xinxi"></i>
                <span>评论</span>
              </div>
              <div>
                <i class="iconfont icon-shanchu1"></i>
                <span>删除</span>
              </div>
            </div>
            <div class="list-item__time">1小时前</div>
            <div class="list-item__comment">
              <ul>
                <li class="list-item__comment-item">
                  <span class="list-item__comment-name">点点星星</span>
                  ：<span class="list-item__comment-text">每天上班顺两天，这里是测试文本，这里是测试文本，这里是测试文本</span>
                </li>
                <li class="list-item__comment-item">
                  <span class="list-item__comment-name">秋香</span>
                  <span class="list-item__comment-text">回复</span>
                  <span class="list-item__comment-name">我爱保时捷</span>
                  ：<span class="list-item__comment-text">滴滴；让出行更美丽！</span>
                </li>
                <li class="list-item__comment-item">
                  <span class="list-item__comment-name">我爱保时捷</span>
                  ：<span class="list-item__comment-text">滴滴；让出行更美丽！</span>
                </li>
              </ul>
              <div class="list-item__comment-fold">
                <span>查看全部内容</span>
                <i class="iconfont icon-arrowdown"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="list-item">
          <img src="http://temp.im/40x40" alt="">
          <div class="list-item__cont">
            <p class="list-item__name">凌度</p>
            <p class="list-item__text">滴滴出行，出行无忧。</p>
            <div class="list-item__pics">
              <img src="http://temp.im/172x172" alt="">
            </div>
            <div class="list-item__bar">
              <div>
                <i class="iconfont icon-zan"></i>
                <span>9</span>
              </div>
              <div>
                <i class="iconfont icon-xinxi"></i>
                <span>评论</span>
              </div>
              <div>
                <i class="iconfont icon-shanchu1"></i>
                <span>删除</span>
              </div>
            </div>
            <div class="list-item__time">1小时前</div>
            <div class="list-item__comment">
              <ul>
                <li class="list-item__comment-item">
                  <span class="list-item__comment-name">点点星星</span>
                  ：<span class="list-item__comment-text">每天上班顺两天，这里是测试文本，这里是测试文本，这里是测试文本</span>
                </li>
                <li class="list-item__comment-item">
                  <span class="list-item__comment-name">秋香</span>
                  <span class="list-item__comment-text">回复</span>
                  <span class="list-item__comment-name">我爱保时捷</span>
                  ：<span class="list-item__comment-text">滴滴；让出行更美丽！</span>
                </li>
                <li class="list-item__comment-item">
                  <span class="list-item__comment-name">我爱保时捷</span>
                  ：<span class="list-item__comment-text">滴滴；让出行更美丽！</span>
                </li>
              </ul>
              <div class="list-item__comment-fold">
                <span>收起</span>
                <i class="iconfont icon-arrowon"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="list-item">
          <img src="http://temp.im/40x40" alt="">
          <div class="list-item__cont">
            <p class="list-item__name">凌度</p>
            <p class="list-item__text">滴滴出行，出行无忧。</p>
            <div class="list-item__pics col2">
              <img src="http://temp.im/172x172" alt="">
              <img src="http://temp.im/172x172" alt="">
            </div>
            <div class="list-item__bar">
              <div>
                <i class="iconfont icon-zan"></i>
                <span>9</span>
              </div>
              <div>
                <i class="iconfont icon-xinxi"></i>
                <span>评论</span>
              </div>
              <div>
                <i class="iconfont icon-shanchu1"></i>
                <span>删除</span>
              </div>
            </div>
            <div class="list-item__time">1小时前</div>
            <div class="list-item__comment">
              <ul>
                <li class="list-item__comment-item">
                  <span class="list-item__comment-name">点点星星</span>
                  ：<span class="list-item__comment-text">每天上班顺两天，这里是测试文本，这里是测试文本，这里是测试文本</span>
                </li>
                <li class="list-item__comment-item">
                  <span class="list-item__comment-name">秋香</span>
                  <span class="list-item__comment-text">回复</span>
                  <span class="list-item__comment-name">我爱保时捷</span>
                  ：<span class="list-item__comment-text">滴滴；让出行更美丽！</span>
                </li>
                <li class="list-item__comment-item">
                  <span class="list-item__comment-name">我爱保时捷</span>
                  ：<span class="list-item__comment-text">滴滴；让出行更美丽！</span>
                </li>
              </ul>
              <div class="list-item__comment-fold">
                <span>收起</span>
                <i class="iconfont icon-arrowon"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="list-item">
          <img src="http://temp.im/40x40" alt="">
          <div class="list-item__cont">
            <p class="list-item__name">凌度</p>
            <p class="list-item__text">滴滴出行，出行无忧。</p>
            <div class="list-item__pics col3">
              <img src="http://temp.im/172x172" alt="">
              <img src="http://temp.im/172x172" alt="">
              <img src="http://temp.im/172x172" alt="">
              <img src="http://temp.im/172x172" alt="">
              <img src="http://temp.im/172x172" alt="">
            </div>
            <div class="list-item__bar">
              <div>
                <i class="iconfont icon-zan acive"></i>
                <span>9</span>
              </div>
              <div>
                <i class="iconfont icon-xinxi"></i>
                <span>评论</span>
              </div>
              <div>
                <i class="iconfont icon-shanchu1"></i>
                <span>删除</span>
              </div>
            </div>
            <div class="list-item__time">2019年7月28日 12:27</div>
            <div class="list-item__comment">
              <ul>
                <li class="list-item__comment-item">
                  <span class="list-item__comment-name">点点星星</span>
                  ：<span class="list-item__comment-text">每天上班顺两天，这里是测试文本，这里是测试文本，这里是测试文本</span>
                </li>
                <li class="list-item__comment-item">
                  <span class="list-item__comment-name">秋香</span>
                  <span class="list-item__comment-text">回复</span>
                  <span class="list-item__comment-name">我爱保时捷</span>
                  ：<span class="list-item__comment-text">滴滴；让出行更美丽！</span>
                </li>
                <li class="list-item__comment-item">
                  <span class="list-item__comment-name">我爱保时捷</span>
                  ：<span class="list-item__comment-text">滴滴；让出行更美丽！</span>
                </li>
              </ul>
              <div class="list-item__comment-fold">
                <span>收起</span>
                <i class="iconfont icon-arrowon"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="list-item">
          <img src="http://temp.im/40x40" alt="">
          <div class="list-item__cont">
            <p class="list-item__name">凌度</p>
            <p class="list-item__text">滴滴出行，出行无忧。</p>
            <div class="list-item__pics col3">
              <img src="http://temp.im/172x172" alt="">
              <img src="http://temp.im/172x172" alt="">
              <img src="http://temp.im/172x172" alt="">
              <img src="http://temp.im/172x172" alt="">
              <img src="http://temp.im/172x172" alt="">
              <img src="http://temp.im/172x172" alt="">
            </div>
            <div class="list-item__bar">
              <div>
                <i class="iconfont icon-zan acive"></i>
                <span>9</span>
              </div>
              <div>
                <i class="iconfont icon-xinxi"></i>
                <span>评论</span>
              </div>
              <div>
                <i class="iconfont icon-shanchu1"></i>
                <span>删除</span>
              </div>
            </div>
            <div class="list-item__time">2019年7月28日 12:27</div>
            <div class="list-item__comment">
              <ul>
                <li class="list-item__comment-item">
                  <span class="list-item__comment-name">点点星星</span>
                  ：<span class="list-item__comment-text">每天上班顺两天，这里是测试文本，这里是测试文本，这里是测试文本</span>
                </li>
                <li class="list-item__comment-item">
                  <span class="list-item__comment-name">秋香</span>
                  <span class="list-item__comment-text">回复</span>
                  <span class="list-item__comment-name">我爱保时捷</span>
                  ：<span class="list-item__comment-text">滴滴；让出行更美丽！</span>
                </li>
                <li class="list-item__comment-item">
                  <span class="list-item__comment-name">我爱保时捷</span>
                  ：<span class="list-item__comment-text">滴滴；让出行更美丽！</span>
                </li>
              </ul>
              <div class="list-item__comment-fold">
                <span>收起</span>
                <i class="iconfont icon-arrowon"></i>
              </div>
            </div>
          </div>
        </div>
     </div>
     <div class="bottom">
       已显示全部
     </div>
   </section>

</body>
<script>
  document.getElementsByTagName('body')[0].style.fontSize = '16px';
  flexible()
  window.onresize = function() {
    flexible()
  }
  function flexible() {
    let design = 375;
    document.documentElement.style.fontSize = screen.width / design * 100  + 'px';
  }
</script>
<script src="./main.js"></script>
</html>